<template>
  <el-aside :width="isCollapse ? '64px' : '200px'">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <!-- ... 加载状态部分保持不变 ... -->
      <el-menu
        v-else
        :default-active="activeMenu"
        background-color="#001529"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
        :collapse="isCollapse"
        :collapse-transition="false"
        router
      >
        <!-- 直接渲染一级菜单 -->
        <el-menu-item 
          v-for="route in flatRoutes"
          :key="route.path"
          :index="route.path"
        >
          <template #title>
            <span>{{ route.meta?.title || '未命名菜单' }}</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<script setup>
// 移除SidebarItem导入
// import SidebarItem from './SidebarItem.vue'

// 新增扁平化路由处理
const flatRoutes = computed(() => {
  const flatten = (routes) => 
    routes.flatMap(route => 
      route.children?.length ? flatten(route.children) : [route]
    )
  
  return processedRoutes.value.filter(route => 
    !!route.component
  )
})
</script>